<template>
  <div class="xuan" ref="xz">
    <div v-for="item in xuan" :key="item.id" class="img" @mouseover="change(item.id)" @mouseout="change(item.id)" @click="onclick(item.text)">
        <img v-show="item.isBlue" :src="item.blueImg" alt="">
        <img v-show="!item.isBlue" :src="item.yellowImg" alt="">
        <p>{{ item.text }}</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref,onMounted,reactive} from 'vue'
interface typexuan{
    id: number
    blueImg: string
    yellowImg: string
    text: string
    isBlue: boolean
}
const xuan=reactive<Array<typexuan>>([
    {
        id:1,
        blueImg:'../src/assets/image/dingwei_nor.png',
        yellowImg:'../src/assets/image/dingwei_hov.png',
        text:'定位',
        isBlue:true
    },
     {
        id:2,
        blueImg:'/src/assets/image/fenxi_nor.png',
        yellowImg:'/src/assets/image/fenxi_hov.png',
        text:'分析',
        isBlue:true
    },
     {
        id:3,
        blueImg:'/src/assets/image/huaxinag_nor.png',
        yellowImg:'/src/assets/image/huaxiang_hov.png',
        text:'画像',
        isBlue:true
    },
     {
        id:4,
        blueImg:'/src/assets/image/che_nor.png',
        yellowImg:'/src/assets/image/che_hov.png',
        text:'车辆',
        isBlue:true
    },
     {
        id:5,
        blueImg:'/src/assets/image/jiangkong_nor.png',
        yellowImg:'/src/assets/image/jiangkong_hov.png',
        text:'监控',
        isBlue:true
    },
    {
        id:6,
        blueImg:'/src/assets/image/tingche_nor.png',
        yellowImg:'/src/assets/image/tingche_hov.png',
        text:'停车',
        isBlue:true
    }
])


const xz=ref()
onMounted(()=>{
    // console.log( xz.value.children);
   for(let a=0;a<xz.value.children.length;a++){
    // 给每个盒子设置出发时间
    xz.value.children[a].style['animation-delay']=`${-5-a*3.3}s,-${a*3.3}s,-${a*3.3}s`
   }
    
})

const change=(id:number)=>{
    let obj=xuan.find(item=>item.id===id)
    obj.isBlue=!obj.isBlue
    // 移入或移出暂停所有动画
    for (let a = 0; a < xz.value.children.length; a++) {
    xz.value.children[a].style["animation-play-state"] = obj.isBlue ? 'running':'paused'}
}

const onclick=(text:string)=>{
    alert(text)
}

</script>

<style scoped lang="scss">
@keyframes moveX {
  0% {
    left: -100px;
  }
 
  100% {
    left: 80%;
  }
}
@keyframes moveY {
  0% {
    top: 0px;
  }
  
  100% {
    top: 60%;
  }
}
@keyframes moveScale {
  0% {
    transform: scale(0.6);
  }
  50%{
     transform: scale(1);
  }
  100% {
    transform: scale(0.6);
  }
}

.xuan{
    margin-top:80px;
    color: white;
    position: relative;
    height: 500px;
    .img{
        width: 200px;
        height: 200px;
        text-align: center;
        // border: 2px solid red;
        position: absolute;
        top: 0;
        left: 0;
         /* 动画名称 */
        animation-name: moveX,moveY,moveScale;
         /* 动画时长 */
        animation-duration:10s, 10s, 20s ;
         /* 动画无限循环 */
        animation-iteration-count: infinite;
        /* 动画来回运动 */
        animation-direction: alternate;
        /* 贝赛尔曲线 */
        animation-timing-function: cubic-bezier(0.36,0,0.64,1);

    }
}

</style>